<template>
	<view :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''">
		<tm-menubars title="列表及组" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet color="blue text"><view class="text-size-s text-weight-b ">基本示例</view></tm-sheet>
		<tm-listitem
			:left-icon-size="80"
			value="打开"
			title="支付"
			label="微信和支付宝微信和支付宝微信和支付宝微信和支付宝"
			left-icon="https://roundicons.com/wp-content/uploads/2017/09/Grass-freebie-icon.png"
			show-left-icon
		>

		</tm-listitem>
		<tm-listitem title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
		<tm-sheet color="blue text"><view class="text-size-s text-weight-b ">个性化</view></tm-sheet>
		<tm-listitem value="26" :round="24" :shadow="12" title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
		<tm-listitem value="99" :round="3" :shadow="0" border title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>

		<tm-grouplist title="列表组" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
			<tm-listitem title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
			<tm-listitem title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
			<tm-listitem title="朋友圈" left-icon="icon-user-fill" show-left-icon left-icon-color="green"></tm-listitem>
		</tm-grouplist>
		<tm-grouplist ref="listitem" title="列表组" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
			<tm-listitem v-for="(item, index) in indexlen" :key="index" title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
		</tm-grouplist>
		<view
			class="ma-32 pa-24"
			@click="
				indexlen = indexlen == 4 ? 2 : 4;
			"
		>
			<tm-button>动态添加列表组件的项目</tm-button>
		</view>
		<tm-grouplist @change="test" title="拓展列表" title-theme="blue text">
			<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
				<template v-slot:group>
					<view >
						<tm-sheet v-for="(item,index) in 4" :key="index" :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
					</view>
				</template>
			</tm-listitem>
			<tm-listitem group title="可以无限级嵌套" left-icon="icon-QQ" show-left-icon>
				<template v-slot:group>
					<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
						<view>这里面可以放任意内容、</view>
						<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
							<template v-slot:group>
								<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
									<view>这里面可以放任意内容、</view>
									<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
										<template v-slot:group>
											<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
										</template>
									</tm-listitem>
								</tm-sheet>
							</template>
						</tm-listitem>
					</tm-sheet>
				</template>
			</tm-listitem>
		</tm-grouplist>

		<tm-listitem group title="也可以独立拓展" left-icon="icon-QQ" show-left-icon>
			<template v-slot:group>
				<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
			</template>
		</tm-listitem>

		<tm-grouplist black title="暗黑列表组" title-theme="blue text">
			<tm-listitem black title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
			<tm-listitem black title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
			<tm-listitem black title="朋友圈" left-icon="icon-user-fill" show-left-icon left-icon-color="green"></tm-listitem>
		</tm-grouplist>

		<view style="height: 100upx;"></view>
	</view>
</template>

<script>
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
import tmGrouplist from '@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmPickersDate from '@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue';
export default {
	components: {tmPickersDate, tmFullView, tmMenubars, tmSheet, tmInput, tmListitem, tmGrouplist, tmButton },
	data() {
		return { indexlen: 0 };
	},
	methods: {
		test(e) {
			console.log(e);
		}
	}
};
</script>

<style></style>
